<template>
  <!--  已完成,后续添加对应链接-->
  <header class="container-fluid">
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="javascript:" v-on:click="changeComponent(Home)">GiliGili</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="javascript:" v-on:click="changeComponent(Home)">主页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:" v-on:click="search(null,1)">学习</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="javascript:" v-on:click="search(null,7)">艺术</a>
            </li>
            <li class="nav-item dropdown">
              <a href="javascript:" class="nav-link d-block link-dark text-decoration-none dropdown-toggle" id="dropdownType" data-bs-toggle="dropdown" aria-expanded="false">
                其他
              </a>
              <ul class="dropdown-menu text-small" aria-labelledby="dropdownType">
                <li><a class="dropdown-item" href="javascript:" v-on:click="search(null,5)">游戏</a></li>
                <li><a class="dropdown-item" href="javascript:" v-on:click="search(null,6)">娱乐</a></li>
                <li><a class="dropdown-item" href="javascript:" v-on:click="search(null,2)">科技</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item disabled" href="javascript:">惊喜还在完善</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled">电影</a>
            </li>
            <li class="nav-item" v-if="user">
              <div class="dropdown">
                <a href="javascript:" class="nav-link d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                  <img :src="user?prefix2+user.face+'.jpg':''" :alt="user.name" width="32" height="32" class="rounded-circle">
                </a>
                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
                  <li><a class="dropdown-item" href="javascript:" v-on:click="seeInfo(user.uuid)">个人主页</a></li>
                  <li><a class="dropdown-item" href="javascript:" v-on:click="changeComponent(PersonalInfo)">信息管理</a></li>
                  <li><a class="dropdown-item" href="javascript:" v-on:click="changeComponent(Upload)">上传视频</a></li>
                  <li><a class="dropdown-item" href="javascript:" v-on:click="changeComponent(VideoManage)">视频管理</a></li>
                  <li><a class="dropdown-item" href="javascript:" v-on:click="changeComponent(Favorites)">我的收藏</a></li>
                  <li><a class="dropdown-item" href="javascript:" v-on:click="changeComponent(SubscribeList)">我的关注</a></li>
                  <li><a class="dropdown-item" href="javascript:" v-on:click="changeComponent(History)">历史记录</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="javascript:" @click="request.get('user/logout').then(()=>{uuid=0;changeComponent(Home)});">注销</a></li>
                </ul>
              </div>
            </li>
            <li class="nav-item" v-if="!user">
              <a @click="changeComponent(Login)" class="nav-link">登录</a>
            </li>
<!--            <li class="nav-item">
              <span class="nav-link">{{ uuid }}</span>
              <span class="nav-link">{{ uuid?true:false }}</span>
            </li>-->
          </ul>
          <form class="d-flex" @submit="search(inputWord)">
            <input class="me-2" type="search" placeholder="这里可以直接搜索内容" aria-label="Search" v-model="inputWord">
            <button class="btn btn-outline-success" type="button" v-on:click="search(inputWord)">搜索</button>
          </form>
        </div>
      </div>
    </nav>
  </header>
  <div style="background-color: #212529;height: 78px"></div>
</template>

<script setup lang="ts">
import {inject, ref, watch,Ref} from "vue";

import Home from "@/components/Home.vue";
import SearchList from "@/components/SearchList.vue";
import Upload from "@/components/Upload.vue";
import PersonalPage from "@/components/PersonalPage.vue";
import PersonalInfo from "@/components/PersonalInfo.vue";
import Favorites from "@/components/Favorites.vue";
import History from "@/components/History.vue";
import Login from "@/components/Login.vue"
import SubscribeList from "./SubscribeList.vue"
import request from "@/hooks/request";
import VideoManage from '@/components/VideoManage.vue'
import {User} from "@/types/AllData";


// 获取provide中的数据
const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
const userData = inject('userData')
const prefix2 = inject('prefix2')
const uuid=inject('uuid')
const seeInfo=inject('seeInfo')
// const imageSrc = ref("../assets/1.jpeg")
// watch(userData,()=>{
//
// },{immediate: true,deep:true})
const user=ref()
request.get('/user/getCurrent').then(re=>{
  if (re)
    uuid.value=re.uuid
  user.value=re;
})
watch(uuid,()=>{
  request.get('/user/getCurrent').then(re=>{
    user.value=re;
  })
})


//实现搜索框
const searchWord=inject('searchWord')
const inputWord=ref<string|null>(searchWord.value)
const search=inject('search')
</script>

<style scoped>
body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}
</style>